<template>
  <div>
    <el-dialog title="添加合同" :visible="visible" :modal="false" width="580px" @close="$emit('update:visible',false)">
      <el-row type="flex" justify="center">
        <el-form ref="formRef" :model="formData" :rules="rules">
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="formData.buildingId" placeholder="请选择租赁的楼宇" style="width:380px">
              <el-option v-for="item in buildingList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁起止日期" prop="time">
            <el-date-picker
              v-model="formData.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:380px"
            />
          </el-form-item>
          <el-form-item label="租赁合同" prop="fileList"><br>
            <el-upload
              ref="upload"
              v-model="formData.fileList"
              :on-change="handleFileChange"
              class="upload-demo"
              action=""
              :before-upload="beforeAvatarUpload"
              multiple
              :http-request="imgUpload"
              :limit="1"
              style="width:380px"
            >
              <el-button size="small" class="el-icon-upload2" type="primary" plain @click="submitUpload">上传文件</el-button>
              <div slot="tip" class="el-upload__tip">支持拓展名：.png .jpg .jpeg,文件大小不得超过5M</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button>取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getBuildingFeeAPI } from '@/api/propertyfee'
import { addRentAPI, uploadFilesAPI } from '@/api/enterprise'
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      buildingList: [],
      startTime: '', // 开始日期
      endTime: '', // 结束日期
      contractUrl: '', // 合同附件url
      contractId: null, // 合同附件id

      formData: {
        fileList: '',
        time: '',
        buildingId: null,

        enterpriseId: null// 企业id
      },
      rules: {
        fileList: [
          { required: true, message: '请上传租赁合同', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择租赁起止日期', trigger: 'blur' }
        ],
        buildingId: [
          { required: true, message: '请选择租赁的楼宇', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const build = await getBuildingFeeAPI()
    console.log(build, 666)
    this.buildingList = build.data
  },
  methods: {
    // 提交
    async onSubmit() {
      this.$refs.formRef.validate()
      await addRentAPI({
        buildingId: this.formData.buildingId,
        startTime: `${new Date(this.formData.time[0]).getFullYear()}-${(new Date(this.formData.time[0]).getMonth() + 1).toString().padStart(2, '0')}-${new Date(this.formData.time[0]).getDate().toString().padStart(2, '0')}`,
        endTime: `${new Date(this.formData.time[1]).getFullYear()}-${(new Date(this.formData.time[1]).getMonth() + 1).toString().padStart(2, '0')}-${new Date(this.formData.time[1]).getDate().toString().padStart(2, '0')}`,
        contractUrl: this.contractUrl,
        contractId: this.contractId,
        type: 0,
        enterpriseId: this.formData.enterpriseId
      })
      this.$message.success('新增合同成功')
      this.$emit('update:visible', false)
      this.$emit('onSuccess')
    },
    // 自定义上传
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleFileChange(file, fileList) {
      // 当文件发生变化时，更新 fileList
      this.formData.fileList = fileList
      // 你可以在这里执行其他逻辑，比如将文件列表发送到服务器等
    },
    // 上传文件之前校验
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 png 、jpg 、jpeg 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
        return false
      }
      return isJPG && isLt2M
    },
    async imgUpload(file) {
      const formDatas = new FormData()
      await formDatas.append('file', file.file)
      await formDatas.append('type', 'businessLicense')
      const res = await uploadFilesAPI(formDatas)
      // 将拿到的值赋给url 和 id
      this.contractUrl = res.data.url
      this.contractId = res.data.id
      this.$message.success('图片导入成功')
    }
  }
}
</script>

<style>

</style>
